import { Component, OnInit } from '@angular/core';
import { HttpService } from 'app/core/service/http.service';
import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';

@Component({
  selector: 'app-video-teaching',
  templateUrl: './video-teaching.component.html',
  styleUrls: ['./video-teaching.component.scss']
})
export class VideoTeachingComponent implements OnInit {
  recordId = 0;
  videoSubject: any;
  selectIndex = 0;
  isSaved = false;


  public get focuseVideo(): any {
    let result = {
      classnum: '没有视频内容',
      classname: '没有视频内容',
      videoUrl: '',
      topicList: []
    };
    if (this.videoSubject && this.videoSubject.drillRecordFlowOutputs && this.videoSubject.drillRecordFlowOutputs[this.selectIndex]) {
      const entity = this.videoSubject.drillRecordFlowOutputs[this.selectIndex];
      result = {
        classnum: entity.flowName,
        classname: entity.flowComment,
        videoUrl: this.httpService.IP_PORT + entity.videoContent,
        topicList: entity.drillFormOutputs
      };
    }
    return result;
  }

  public get videoList(): any {
    if (this.videoSubject && this.videoSubject.drillRecordFlowOutputs) {
      return this.videoSubject.drillRecordFlowOutputs;
    } else {
      return [];
    }
  }

  constructor(
    private httpService: HttpService,
    private route: ActivatedRoute,
    private message: NzMessageService,
    private nzModalService: NzModalService
  ) {
    this.videoSubject = {};
  }

  ngOnInit() {
    this.route.queryParamMap
      .pipe(map(params => params.get('id') || null))
      .subscribe(e => {
        this.recordId = Number(e);
        if (!this.recordId) {
          this.message.error('无法确定主键信息!');
        } else {
          this.getSubjectContent(this.recordId);
        }
      });
  }

  // v是播放视频的路径 i是点击第几个添加选中样式 t是修改播放区左边的标题
  palyvideo(videoIndex: number) {
    this.selectIndex = videoIndex;
    const vi = document.getElementById("example_video_1");
    this.load(vi);
  }

  load(v) {
    v.load();
  }

  play(e) {
    e.play();
  }

  async getSubjectContent(recordId: number) {
    const result = await this.httpService.get<any>(`drillrecord/GetVideoContent?recordId=${recordId}`);
    if (result && result.dataJson) {
      this.isSaved = true;
      this.videoSubject = JSON.parse(result.dataJson);
    } else {
      this.videoSubject = result;
    }

    this.palyvideo(0);
  }

  /**
  * 保存操作内容
  */
  saveResult() {
    this.nzModalService.confirm({
      nzTitle: '提示',
      nzContent: '是否要提交操作内容。',
      nzOnOk: async () => {
        const jsonData = JSON.stringify(this.videoSubject);
        const postBody = {
          recordId: this.recordId,
          dataJson: jsonData,
        };
        await this.httpService.post<any>('drillrecord/AddVideoOperation', postBody);
        this.getSubjectContent(this.recordId);
      }
    });
  }
}
